<template>
    <div class="box">
        子组件 {{ msg }}
        <br />
        <input type="text" v-model="value"/>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                value: ''
            }
        },
        props: ["msg"],
        mounted() {
            // 模拟一个等三秒钟就会变的数据
            // setTimeout(() => {
            //     this.$store.commit('test/setTestMsg', 'changed MSG')
            // }, 3000);
        },
        // watch: {
        //     msg: {
        //         handler(oldVal, newVal) {
        //             console.log("msg发生了变化");
        //         },
        //         immediate: true,
        //         deep: deep
        //     },
        // },
        watch: {
            value(newVal, oldVal) {
                console.log(newVal);
                // 不用父子组件的方式传值
                // 而是用 vuex
                this.$store.commit('test/setTestMsg', newVal)
                // this.$emit('setSonVal', newVal)
            }
        }
    };
</script>

<style lang="less" scoped>
    .box {
        padding: 10px;
        margin: 10px;
        border: 1px solid #f00;
    }
</style>